<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="button" value="send" onclick="sendAjax()">
    <script>
        /*  
        
         事件 load ， XMLHttpRequest 请求成功完成时触发该事件监听。也可以使用 onload 属性替代
         事件 loadend ，当请求结束时触发, 无论请求成功(load) 还是失败(error)。也可以使用 onloadend 属性。
         事件 error ，在请求过程中，若发生 Network error 则会触发此事件。
         事件 timeout ，在预设时间内没有接收到响应时触发。也可以使用ontimeout 属性。 
         
         
         */
        function sendAjax() {
         
            let xhr = new XMLHttpRequest();//0实例对象构建完成

            //onload表示的仅仅是ajax的流程是正常的，并且有响应结果，但是不表示响应结果正常
            xhr.onload = function () {
                if (xhr.status >= 200 && xhr.status < 300) {
                    console.log("请求成功", xhr.statusText, xhr.responseText);
                } else if (xhr.status >= 400 && xhr.status < 500) {
                    console.log("请求成功,服务器对该资源操作受限(资源不存在)", xhr.statusText);
                } else if (xhr.status >= 500 && xhr.status < 600) {
                    console.log("请求成功,服务器内部执行代码错误", xhr.statusText);
                } else {
                    console.log("请求成功，不支持ajax");
                }

            };
            xhr.onerror=function(){
                console.log("网络错误",xhr.readyState)
            };

            xhr.onloadend=function(){
                //网络中断，根本没有触发请求的发送，xhr,status将不会有任何变化，使用默认值0
                console.log("ajax请求结束","ajax的状态:",xhr.readyState,"http的状态码:",xhr.status,"响应结果:",xhr.responseText);
            };
            //设置请求时长
            xhr.timeout=1000;
            xhr.ontimeout=function(){
                console.log("请求超时");
            };
            // xhr.open("get", "/user");//

            xhr.open("get", "/userAsync");
            xhr.send();
        }
    </script>
</body>

</html>